<template>
  <div :class="animate" :style="{ height: height, width: width }" :id="chartOption.bindingDiv" ref="text">
    <div :style="normalTextStyle">
      {{ nowTime }}
    </div>
      
  </div>
  
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from '@/views/dashboard/mixins/resize'
import VueEvent from '@/views/tool/datav/VueEvent'
import '../../animate/animate.css'
import { getFormsource } from "@/api/tool/datav/formsource";
import {parseQueryString, fIsUrL} from '../../util/urlUtil'
import { chartApiBar,chartBIanalysis } from "@/api/tool/datav/chartApi";
import { websocketCommand } from "../../util/websocket.js";

const animationDuration = 6000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartOption: {
      type: Object,
    },
    drawingList:{
      type: Array
    }
  },
  data() {
    return {
      chart: null,
      nowTime:null,   //存放时分秒变量
      dateTimer: "",           //定义一个定时器的变量
      currentTime: new Date(),       // 获取当前时间
      timer: "",
      wsObj: null,
      wsFlag: false,
      wsTimer: "",
      wsValue: null,
      animate: this.className
      
    };
  },
  watch: {
    width() {
      
    },
    height() {
      
    },
    chartOption: {
      deep: true,
      handler(newVal) {
        this.setOptions(JSON.parse(JSON.stringify( newVal )));
      }
    },
    "chartOption.timeout": {
      handler() {
        this.chart = null;
        this.initChart();
      }
    },
    "chartOption.dataSourceType": {
      handler(value) {
        //切换数据源重新连接
        if (value !== "websocket") {
          this.wsFlag = false;
          //每次切换数据源恢复原来动画
          this.animate = this.className;
        }
        if (value !== "url") {
          clearTimeout(this.timer);
        } 
      }
    },
    "chartOption.interfaceKey": {
      handler(newValue, oldValue) {
        //初始化不创建连接，改变接口地址重新创建
        if (oldValue !== undefined && oldValue != "") {
          this.wsValue = null;
          this.closeWs();
          this.createWs();
          this.animate = this.className;
        }
      }
    },
    wsFlag: {
      handler(value) {
        if (!value) {
          this.wsValue = null;
          this.closeWs();
        }
      }
    },
    className: {
      handler(value) {
        this.animate = value;
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart = null;
    clearTimeout(this.timer);
    clearTimeout(this.dateTimer);
    if (this.wsFlag) {
      this.closeWs();
    }
  },
  computed:{
    normalTextStyle(){
      const style = {color:this.chartOption.fontColor,fontSize:this.chartOption.fontSize + "px",fontFamily:this.chartOption.fontFamily,
        backgroundColor: this.chartOption.backgroundColor,height: this.height, width: this.width,
        fontWeight:this.chartOption.fontWeight,letterSpacing:this.chartOption.letterSpacing + "px",textAlign:this.chartOption.textAlign}
      return style
    }
    
  },
  created() {
      
  },
  beforeDestroy() {
    if (this.dateTimer) {
      clearInterval(this.dateTimer); // 在Vue实例销毁前，清除定时器
    }
  },
  methods: {
    initChart() {
      
      //判断是否开启定时器，当是访问url接口时候并且timeout不为0时候开启定时器
      if (this.timer != "") {
        clearTimeout(this.timer);
      }
      if (
        (this.chartOption.dataSourceType == 'url' || this.chartOption.dataSourceType == 'database') &&
        this.chartOption.timeout > 0
      ) {
        let timerTask = () => {
          this.setOptions(JSON.parse(JSON.stringify(this.chartOption)));
          this.timer = setTimeout(() => {
           
            timerTask();
          }, this.chartOption.timeout);
        };

        timerTask();
      }else{
        this.setOptions(JSON.parse(JSON.stringify( this.chartOption )));
      }      
    },
    setOptions: async function(dataOption)  {
      
      // console.log("=>",dataOption)
      //如果不是静态数据就调用接口给staticDataValue赋值
      if (dataOption.dataSourceType == "url" || dataOption.isStaticData == false) {
        let paramJson = parseQueryString(dataOption.requestParameters);

        let interfaceURL = dataOption.interfaceURL;

        let result = await chartApiBar(
          dataOption.requestMethod,
          interfaceURL,
          paramJson,
          dataOption.token
        );
        dataOption.staticDataValue = result;

      } else if (dataOption.dataSourceType == "database") {
        if (dataOption.database.executeSql != undefined && dataOption.database.executeSql != '') {
          
          let result = [];
          if(dataOption.database.sqlType == 'custom'){
          
            result = await chartBIanalysis(dataOption.database);
          }
          if (result.code == 200) {
            dataOption.staticDataValue = result.data;
            //console.log(dataOption.staticDataValue);
          } else {
            alert("操作数据库错误");
          }
        }
      } else if (dataOption.dataSourceType == "form") {
        if (dataOption.formSource != undefined) {
          let response = await getFormsource(dataOption.formSource.id);
          dataOption.staticDataValue = JSON.parse(response.data.formData);
        }
      } else if (dataOption.dataSourceType == "websocket") {
        if (
          dataOption.interfaceKey != undefined &&
          dataOption.interfaceKey != ""
        ) {
          if (!this.wsFlag) {
            this.wsFlag = true;
            this.wsValue = null;
            this.createWs();
          }
          if (this.wsValue != null) {
            dataOption.staticDataValue = this.wsValue;
          }
        }
      }

      if(dataOption.newDataFormat == true || typeof dataOption.staticDataValue != 'string'){ 
        
        dataOption.staticDataValue = dataOption.staticDataValue[0].text;
        
      }

      //设置自定义格式值
      if(dataOption.isCustom == false){
          this.chartOption.customFormat = dataOption.dateFormat;
      }

      this.nowTime = this.chartOption.customFormat.replace("yyyy",this.dateOption().year)
		   .replace("MM",this.dateOption().month)
		   .replace("dd",this.dateOption().date)
		   .replace("HH",this.dateOption().Hours)
		   .replace("hh",this.dateOption().hours)
		   .replace("mm",this.dateOption().mimu)
		   .replace("ss",this.dateOption().sec)
		   .replace("SSS",this.dateOption().mill)
       .replace("day",this.dateOption().day);
      //计时器开始
      this.dateTimer = setInterval(this.getTime, 1000);

      //数据处理
       if(dataOption.customData != undefined && dataOption.customData != ""){
        
        try {
          dataOption.staticDataValue = (
          
            //里面为要处理的代码块
          eval(dataOption.customData) 
          
          )(
            dataOption.staticDataValue,
            this.$refs.text
          );
        } catch (error) {
          console.log(error)
        }
        
       }

        //交互组件配置
      if(dataOption.interactData != undefined && dataOption.interactData != ""){
          try {
              dataOption.staticDataValue = (        
              //里面为要处理的代码块
              eval(dataOption.interactData)             
            )(
              dataOption.staticDataValue,
              this.$refs.text
            );
          } catch (error) {
            console.log(error)
          }               
       }    
     
    },
    dateOption(){
      //获取时间格式
      const d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      let date = d.getDate();
      let Hours= d.getHours();
      let hours = d.getHours();
      let minute = d.getMinutes();
      let second = d.getSeconds();
      let mill = d.getMilliseconds();
      let day = d.getDay();
      if(hours>12) {
        hours -= 12;
      }
      
      month=check(month);
      date=check(date);
      Hours=check(Hours);
      hours=check(hours);
      minute=check(minute);
      second=check(second);
      mill=check(mill);
      function check(i){
          const num = (i<10)?("0"+i) : i;
          return num;
      }
      switch(day){
          case 0:day="日";break;
          case 1:day="一";break;
          case 2:day="二";break;
          case 3:day="三";break;
          case 4:day="四";break;
          case 5:day="五";break;
          case 6:day="六";break;
      }
      return {
              year:year,
              month:month,
              date:date,
              day:"星期"+day,
              Hours:Hours,
              hours:hours,
              mimu:minute,
              sec:second,
              mill:mill
          };
    },
    getTime(){
      //根据时间格式指定获取实时时间
      this.nowTime = this.chartOption.customFormat.replace("yyyy",this.dateOption().year)
		   .replace("MM",this.dateOption().month)
		   .replace("dd",this.dateOption().date)
		   .replace("HH",this.dateOption().Hours)
		   .replace("hh",this.dateOption().hours)
		   .replace("mm",this.dateOption().mimu)
		   .replace("ss",this.dateOption().sec)
		   .replace("SSS",this.dateOption().mill)
       .replace("day",this.dateOption().day);
       
    },
    //  ws连接成功，后台返回的ws数据
    receiveMsg(e) {
      if (e.action == "chat") {
        // console.log('服务端推送',e);
        this.wsValue = e.result;
        this.setOptions(JSON.parse(JSON.stringify(this.chartOption)));
      }
    },
    // 建立连接、发起ws请求，以心跳方式，向服务端发送数据
    createWs() {
      this.wsObj = new WebSocket(process.env.VUE_APP_WEBSOCKET);
      // 若为对象类型，以回调方式发送
      websocketCommand(
        this.wsObj,
        "create",
        5000,
        this.chartOption.interfaceKey,
        this.sendHeartBeat,
        this.receiveMsg,
        this.reconnectWs,
        this.wsWarning
      );
    },
    // 断网重连，需要处理的逻辑
    reconnectWs() {
      if (this.wsObj) {
        console.log("%c websocket_reconnect", "color:blue");
        this.createWs();
      }
    },
    // 以回调方式向服务端发送(对象类型的)心跳
    sendHeartBeat() {
      if (this.wsTimer != "") {
        clearTimeout(this.wsTimer);
      }

      let wsTimerTask = () => {
        console.log("发送心跳", "ping");
        let obj = { action: "keep", key: this.chartOption.interfaceKey };
        this.wsObj.send(JSON.stringify(obj));
        this.wsTimer = setTimeout(() => {
          wsTimerTask();
        }, parseInt(process.env.VUE_APP_WEBSOCKET_TIMEOUT));
        this.wsWarning();
      };

      wsTimerTask();
    },
    wsWarning() {
      //如果断开连接则显示组件警告动画并清除计数器
      if (this.wsObj.readyState == 3) {
        this.animate = "warning";
        clearTimeout(this.wsTimer);
      }
    },
    closeWs() {
      clearTimeout(this.wsTimer);
      websocketCommand(
        this.wsObj,
        "close",
        5000,
        this.chartOption.interfaceKey,
        this.sendHeartBeat,
        this.receiveMsg,
        this.reconnectWs,
        this.wsWarning
      );
      this.wsObj = null;
    }
  }
};
</script>
<style ang="scss" scoped>

</style>
